
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  FlatList,
  TouchableOpacity,
} from 'react-native';
var Dimensions = require('Dimensions');
var {height,width} = Dimensions.get('window');
export default class TopListView extends Component {
  _splitLine=()=>{
    return(
      <View style={{height:0,borderTopWidth:StyleSheet.hairlineWidth,borderColor:"#aaa"}}></View>
    );
  }
  _keyExtractor = (item, index) => {
    return index;
  }
  _renderItem=({item})=>{
    return(
      <TouchableOpacity activeOpacity={0.5}>
        <View style={styles.listItemStyle}>
          <Image source={{uri:item.image}} style={{height:52,width:52}}/>
          <Text>{item.title}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  render() {
    return (
      <FlatList
        
        contentContainerStyle={styles.flatListStyle}
        ref="listView"
        horizontal = {true}
        data={this.props.dataArr}
        renderItem={this._renderItem}
        keyExtractor={this._keyExtractor}
        ItemSeparatorComponent={this._splitLine}
          scrollEnabled={false}
          showsHorizontalScrollIndicator={false}
        />
    );
  }
}

const styles = StyleSheet.create({
  listItemStyle:{
    width:width/5,
    justifyContent:'center',
    alignItems:'center',
    marginTop:10,
  },
  flatListStyle:{
    width:width,
    flexDirection:'row',
    //换行显示
    flexWrap:'wrap',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ddd',
  },
});
